<template>
    <div class="personal">
        <el-form ref="personal" :model="personal" :rules="personalRules" size="small" label-width="125px">
            <el-form-item prop="auth_name" label="姓名">
                <el-input v-model="personal.auth_name" placeholder="与身份证保持一致"></el-input>
            </el-form-item>
            <el-form-item prop="id_number" label="身份证号">
                <el-input v-model="personal.id_number" placeholder="填写18位二代身份证号码"></el-input>
            </el-form-item>
            <el-form-item prop="id_pic" label="证件照上传">
                <div class="id-card-box clear">
                    <div class="left">
                        <div class="title">身份证人像面</div>
                        <el-upload
                        class="id-card"
                        :action="uploadUrl"
                        :show-file-list="false"
                        :on-success="personal1Success"
                        :before-upload="personal1Upload">
                            <img v-if="IMG.id_pic_1" :src="IMG.id_pic_1" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                    <div class="left">
                        <div class="title">身份证国徽面</div>
                        <el-upload
                        class="id-card"
                        :action="uploadUrl"
                        :show-file-list="false"
                        :on-success="personal2Success"
                        :before-upload="personal2Upload">
                            <img v-if="IMG.id_pic_2" :src="IMG.id_pic_2" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                    <div class="left">
                        <div class="title">手持身份证人像画照片</div>
                        <el-upload
                        class="id-card"
                        :action="uploadUrl"
                        :show-file-list="false"
                        :on-success="personal3Success"
                        :before-upload="personal3Upload">
                            <img v-if="IMG.id_pic_3" :src="IMG.id_pic_3" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                        
                    <div class="tips left">
                        身份证信息需清晰可辨认；<br />照片未经任何软件编辑修改；<br />支持.jpg、.png、.jpeg格式，大小不超过5M
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="setPersonal('personal')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { identityAdd,submitfile } from "@/api";
import { mapState, mapMutations } from "vuex";

export default {
    data() {
        var validateIDPIC = (rule, value, callback) => {
            if(this.personal.id_pic.length<3) {
                callback(new Error('请上传证件照'));
                return
            }
            let b = true;
            for(let i=0;i<this.personal.id_pic.length;i++){
                if(this.personal.id_pic[i] == ''|| !this.personal.id_pic[i]){
                    b=false;
                    console.log(this.personal[i]);
                    break;
                }
            }
            if(!b){
                callback(new Error('请上传证件照'));
            } else {
                callback();
            };
        };
        return {
            uploadUrl: submitfile,
            user_id: null,
            sample: require('../../assets/sample.png'),
            personal: {
                auth_name: '',
                id_number: '',
                id_pic: [],
            },
            personalRules: {
                auth_name: [{ required: true, message: "请填写姓名" }],
                id_number: [{ required: true, message: "请填写身份证号码" }],
                id_pic: [{ validator: validateIDPIC }],
            },
            IMG: {
                id_pic_1: '',
                id_pic_2: '',
                id_pic_3: '',
            }
        };
    },
    mounted() {
        this.user_id = this.croUser.user_id || null;
        // this.getRESDATA();
    },
    computed: {
        ...mapState(["croUser"])
    },
    methods: {
        ...mapMutations(["OUT_LOGIN"]),
        // personal
        personal1Success(res, file) {
            this.IMG.id_pic_1 = URL.createObjectURL(file.raw);
            this.personal.id_pic[0]=file.response.data;
        },
        personal1Upload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
        personal2Success(res, file) {
            this.IMG.id_pic_2 = URL.createObjectURL(file.raw);
            this.personal.id_pic[1]=file.response.data;
        },
        personal2Upload(file) {
            const isJPG = file.type === file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 5;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 5MB!");
            }
            return isJPG && isLt2M;
        },
        // personal
        personal3Success(res, file) {
            this.IMG.id_pic_3 = URL.createObjectURL(file.raw);
            this.personal.id_pic[2]=file.response.data;
        },
        personal3Upload(file) {
            const isJPG = file.type === file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 5;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 5MB!");
            }
            return isJPG && isLt2M;
        },
        
        // 创作完成地点地址联动
        regionChange: function(val) {
            if (this.region_old != val && this.region_old != "") {
                this.company.city = "";
            }
            this.region_old = val; // oldVal
            var data = formatData(addressData[this.company.region]);
            for (var i = 0; i < data.length; i++) {
                this.$set(this.citys, i, data[i]);
            }
        },
		setPersonal(formName){
			if(!this.croUser){
				this.OUT_LOGIN();
				this.$router.push('/login');
				return
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let para = Object.assign({}, this.personal);
                    para.user_id=this.user_id;
                    para.auth_type=1;
                    identityAdd(para).then(res=>{
                        if(res.data){
                            this.$emit('refresh');
                        }else if(res.tologin) {
                            this.OUT_LOGIN();
                            this.$router.push('/login');
                        }else {
                            this.$message.error(res.msg);
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
		},
    }
};
</script>
<style scoped lang="scss">
</style>
